import 'package:flutter/material.dart';
import './data/listData.dart';
/* 
学习列表布局。列表有以下分类
1、垂直列表
2、垂直图文列表
3、水平列表
4、动态列表
注意： listview组件不能和  Column 一起使用
 
属性名               类型               属性值
scrollDirection      Axis              Axis.horizontal水平列表、Axis.vertical垂直列表
padding       EdgeInsetsGeometry       内边距
resolve             bool               组件反向排序
children            List               列表元素

*/

void main() {
  runApp(
      // 入口文件可以是自定义组件 也可以是flutter组件
      MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: Text('listview'),
      ),
      body: MyApp(), // 注意 listview组件不能和  Column 一起使用
    ),
  ));
}

//  垂直列表  可以自适应滚动条
// class MyApp extends StatelessWidget {
//   MyApp({super.key});
//   @override
//   Widget build(BuildContext context) {
//     return ListView(
//       children: <Widget>[
//         ListTile(
//           leading: Image.network("https://www.itying.com/images/flutter/1.png"),
//           title: Text('华北黄淮高温雨今起强势登场'),
//           subtitle: Text("中国天气网讯 21日开始，华北黄淮高温雨今起强势登场"),
//         ),
//         Divider(),
//         ListTile(
//           leading: Image.network("https://www.itying.com/images/flutter/2.png"),
//           title: Text('保监局50天开32罚单 “断供”违规资金为房市降温'),
//           subtitle: Text("中国天气网讯 保监局50天开32罚单 “断供”违规资金为房市降温"),
//         ),
//         Divider(),
//         ListTile(
//           leading: Image.network("https://www.itying.com/images/flutter/4.png"),
//           title: Text('普京现身俄海军节阅兵：乘艇检阅军舰'),
//         ),
//       ],
//     );
//   }
// }

// 水平列表
// class MyApp extends StatelessWidget {
//   const MyApp({super.key});

//   @override
//   Widget build(BuildContext context) {
//     return SizedBox(
//       height: 200,
//       child: ListView(
//         scrollDirection: Axis.horizontal, // 水平布局
//         children: <Widget>[
//           Container(
//             width: 200,
//             color: Colors.lightBlue,
//             child: Column(children: <Widget>[
//               Image.network("https://www.itying.com/images/flutter/1.png"),
//               Text('this is title')
//             ]),
//           ),
//           Container(
//             width: 180.0,
//             color: Colors.blue,
//           ),
//           Container(
//             width: 180.0,
//             color: Colors.deepOrange,
//           ),
//         ],
//       ),
//     );
//   }
// }

// 动态生成列表
// 有两种方式
// - for循环
// - ListView.builder实现动态列表

// 1. 通过for循环
// class MyApp extends StatelessWidget {
//   const MyApp({super.key});

//   // 这里需要定义一个私有方法 返回值是list
//   List<Widget> _initListData() {
//     // 1.1 for循环
//     // List<Widget> list = [];
//     // for (var i = 0; i < listData.length; i++) {
//     //   list.add(ListTile(
//     //     title: Text("${listData[i]["title"]}"), // 标题
//     //     subtitle: Text("${listData[i]["author"]}"), // 作者
//     //     leading: Image.network("${listData[i]["imageUrl"]}"), // 图片
//     //   ));
//     // }
//     // return list;


//     //  1.2 map方法
//     var list = listData.map((e){
//       return ListTile(
//         title: Text("${e["title"]}"), // 标题
//         subtitle: Text("${e["author"]}"), // 作者
//         leading: Image.network("${e["imageUrl"]}"), // 图片
//       );
//     }).toList(); // 需要转成数组  
//     return list;
//   }

//   @override
//   Widget build(BuildContext context) {
//     return ListView(
//       children: _initListData(),
//     );
//   }
// }


//  2. 通过builder构造函数 最省事
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: listData.length,
      itemBuilder: (context , index){
        // 两个参数 一个是上下文对象  一个是索引
        return ListTile(
          title: Text("${listData[index]["title"]}"), // 标题
          subtitle: Text("${listData[index]["author"]}"), // 作者
          leading: Image.network("${listData[index]["imageUrl"]}"), // 图片
        );
      }
    );
  }
}


